<template>
    <div class="role">
        <!-- 面包屑 -->
        <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/layout/users' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb> -->
        <!-- 抽离了面包屑组件 -->
        <crumbs-nav :level1="'权限管理'" :level2="'角色列表'"></crumbs-nav>
        <!-- 添加角色模块 -->
        <el-button 
            type="success"
            @click="handleClickAddRole"
            plain>添加角色</el-button>
        <!-- 列表表格 -->
        <template>
              <el-table
                :data="roleList"
                style="width: 100%">
                <el-table-column type="expand">
                  <template slot-scope="scope">
                    <el-row 
                    v-for="level1 in scope.row.children"
                    :key="level1.id">
                      <el-col :span="3">
                            <el-tag
                            @close="handleClose(scope.$index,scope.row.id,level1.id)"
                            closable
                            type="success">
                                {{level1.authName}}
                            </el-tag>
                      </el-col>
                      <el-col  :span="21">
                            <el-row  
                            class="liner"
                            v-for="(level2) in level1.children"
                            :key="level2.id">
                                <el-col :span="4">
                                    <el-tag
                                    @close="handleClose(scope.$index,scope.row.id,level2.id)"
                                    closable
                                    type="danger">
                                        {{level2.authName}}
                                    </el-tag>
                                </el-col>
                                <el-col :span="20">
                                    <el-tag 
                                    @close="handleClose(scope.$index,scope.row.id,level3.id)"
                                    closable
                                    v-for="(level3) in level2.children"
                                    :key="level3.id"
                                    type="warning">
                                         {{level3.authName}}                          
                                    </el-tag >
                                </el-col>                               
                            </el-row >                         
                      </el-col>
                    </el-row>
                  </template>
                </el-table-column>
                <el-table-column
                  label="角色名称"
                  prop="roleName">
                </el-table-column>
                <el-table-column
                  label="角色描述"
                  prop="roleDesc">
                </el-table-column>
                <el-table-column
                  label="操作">
                        <template slot-scope="scope">
                            <!-- 编辑 -->
                            <el-button
                                size="mini"
                                type="primary"
                                @click="handleClickEdit(scope.row)"
                                plain><i class="el-icon-edit"></i>   
                            </el-button>
                            <!-- 删除 -->
                            <el-button 
                                size="mini" 
                                type="warning" 
                                @click="handleClickDelete(scope.row)"
                                plain ><i class="el-icon-delete"></i>
                            </el-button>

                            <el-button
                                size="mini"
                                type="warning"
                                @click="handleClickEditAuth(scope.row)"
                                plain><i class="el-icon-check"></i>
                            </el-button>
                        </template>
                </el-table-column>
              </el-table>
            </template>

            <!--弹窗_______ 修改弹窗 -->
            <el-dialog
                title="提示"
                :visible.sync="dialogVisibleEdit"
                width="30%">
                <!-- 表单模板 -->
                <template>
                    <el-form ref="editRole"  label-width="80px">
                        <el-form-item label="角色名称">
                          <!-- select模板 -->
                            <template>
                                <el-select v-model="roleName" ref="editRoleSelect" placeholder="请选择">
                                    <el-option
                                      v-for="item in roleList"
                                      :key="item.id"
                                      :value="item.roleName">
                                    </el-option>                              
                                </el-select>                            
                            </template>
                        </el-form-item>
                        <el-form-item label="角色描述">
                            <el-input ref="editRoleInput" v-model="roleMsg.roleDesc"></el-input>
                        </el-form-item>
                    </el-form>
                </template> 
              
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisibleEdit = false">取 消</el-button>
                  <el-button type="primary" @click="handleClickEditRole(roleMsg.roleDesc)">确 定</el-button>
                </span>
            </el-dialog>

            <!--弹窗_______ 添加弹窗 -->
            <el-dialog
                title="添加角色"
                :visible.sync="dialogVisibleAddRole"
                width="30%">
                    <el-form ref="AddRole"  label-width="80px">
                        <el-form-item label="角色名称">
                            <el-input ref="editRoleInput" v-model="addRole.roleName"></el-input>
                        </el-form-item>                       
                        <el-form-item label="角色描述">
                            <el-input ref="editRoleInput" v-model="addRole.roleDesc"></el-input>
                        </el-form-item>
                    </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisibleAddRole = false">取 消</el-button>
                    <el-button type="primary" @click="handleClickaddRole">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 弹窗_____ 设置权限弹窗 -->
            <el-dialog
                title="修改权限"
                :visible.sync="dialogVisibleEditAuth"
                width="30%">
                    <el-tree
                        ref="grantTreeRef"
                        :data="authList"
                        show-checkbox
                        node-key="id"
                        default-expand-all
                        :default-checked-keys="checkedArr"
                        :props="defaultProps"    
                      >
                      
                    </el-tree>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisibleEditAuth = false">取 消</el-button>
                    <el-button type="primary" @click="handleClickeditAuth">确 定</el-button>
                </span>
            </el-dialog>
    </div>
</template>

<script>
import crumbsNav from '../../common/crumbsNav'
export default {
    components:{
        crumbsNav
    },
   name: 'Role' ,
   data(){
       return {
           dialogVisibleEdit:false,
           dialogVisibleDelete:false,
           dialogVisibleAddRole:false,
           dialogVisibleEditAuth:false,
           roleList:[],
           authList:[],
           roleId:'',
           defaultProps:{
                children: 'children',
                label: 'authName'
           },
           roleName:'',
           roleMsg:{
               id:'',
               roleName:'',
               roleDesc:''
           },
           addRole:{
               roleName:'',
               roleDesc:''
           },
           deleteRoleId:'',
           checkedArr:[]
       }
   },
   created(){
       this.getRoleDate()
   },
   methods:{
       //修改权限
       //准备用递归写  但是发现获取的数据有问题
    //    digui(scope){
    //        if(scope.children&&scope.children.length>0){
    //             scope.children.forEach(item =>{              
    //                 this.checkedArr.push(item.id)                    
    //                 this.digui(item)                                                  
    //             })
    //        }
    //    },
       handleClickEditAuth(scope){
           this.roleId = scope.id
           this.checkedArr = []
        //    this.digui(scope)
         if(scope.children&&scope.children.length>0){
                scope.children.forEach(item =>{
                    if(item.children&&item.children.length>0){
                        item.children.forEach(item =>{                     
                             if(item.children&&item.children.length>0){
                                item.children.forEach(item =>{                     
                                       this.checkedArr.push(item.id)                                      
                                })  
                            }                                                 
                        })  
                    }                                                                                                                
                })
           }
           this.dialogVisibleEditAuth = true;
           this.$axios.get(`rights/tree`).then(res => {
            //    console.log(res.data.data)
               this.authList = res.data.data
           })
       },
       handleClickeditAuth(){
           var checkedKeys = this.$refs.grantTreeRef.getCheckedKeys()
           var halfCheckedKeys = this.$refs.grantTreeRef.getHalfCheckedKeys()
           var lastKeys = checkedKeys.concat(halfCheckedKeys)
           var rids = lastKeys.join(',')
            //    console.log(rids)
           this.$axios.post(`roles/${this.roleId}/rights`,{ rids}).then(res => {
            //    console.log(res)
               this.dialogVisibleEditAuth = false;
               this.getRoleDate()
           })
       },
       //删除权限
        handleClose(index,roleId,authId){
            console.log(index,roleId,authId)
            this.$axios.delete(`roles/${roleId}/rights/${authId}`)
                        .then(res => {
                            // console.log(res.data)
                            if(res.data.meta.status==200){
                                this.$message({
                                    message: res.data.meta.msg,
                                    type: 'success'
                                });
                                this.roleList[index].children = res.data.data
                            }
                        })
        },
        //添加角色
        handleClickAddRole(){
            this.dialogVisibleAddRole = true
        },
        handleClickaddRole(){
            this.$axios.post(`roles`,this.addRole).then(res => {
                this.dialogVisibleAddRole = false
                // console.log(res.data.meta.status)
                if(res.data.meta.status==201){
                    this.$message({
                          message: res.data.meta.msg,
                          type: 'success'
                        });
                }
                this.getRoleDate()
            })
        },
        //修改
        handleClickEdit(val){
            console.log(val)
            this.roleMsg.id = val.id
            this.roleName = val.roleName
            this.dialogVisibleEdit = true 
        },  
        //提交修改
        handleClickEditRole(msg){
            // this.$refs.editRoleInput.resetFields();???????????????
            if(this.$refs.editRoleSelect.value&&this.$refs.editRoleInput.value){
                this.$axios.put(`roles/${this.roleMsg.id}`,this.roleMsg)
                .then(res => {
                    this.dialogVisibleEdit = false 
                    if(res.data.meta.status==200){
                         this.$message({
                          message: res.data.meta.msg,
                          type: 'success'
                        });
                        this.getRoleDate()
                    }
                })
            }else{
                this.$message({
                          message: '请将信息填写完整',
                          type: 'warning'
                 });
            }            
        },
        //删除
        handleClickDelete(val){          
            this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                // this.deleteRoleId = val.id
                this.$axios.delete(`roles/${val.id}`,{
                    params:{
                        id:val.id
                    }
                }).then(res =>{
                    if(res.data.meta.status==200){
                        this.$message({
                          type: 'success',
                          message: '删除成功!'
                        });
                        this.getRoleDate()
                    }
                })               
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
        },  
        getRoleDate(){
           this.$axios.get(`roles`).then(res => {
            //    console.log(res.data.data)
               this.roleList = res.data.data
           })
       }
   }
}
</script>

<style scope>
    
    .el-tag {
        margin:5px 5px;
    }
    .liner::before {
        display: block;
        width: 100%;
        content: "";
        height: 1px;
        border-top:1px solid #aaa;


    }
</style>
